<style>
    .media, .media-body {
        overflow: inherit;
    }

    .balance-log-container {
        margin-top: 20px;
    }

    .balance-log-item {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        padding: 15px 20px;
        margin-bottom: 15px;
        position: relative;
        transition: transform 0.2s ease;
    }

    .balance-log-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .log-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .log-type {
        font-weight: 600;
        font-size: 15px;
        display: flex;
        align-items: center;
    }

    .log-type i {
        margin-right: 8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }

    .log-type.increase i {
        background-color: #52c41a; /* 收入绿色 */
    }

    .log-type.decrease i {
        background-color: #f5222d; /* 支出红色 */
    }

    .log-time {
        color: #8c8c8c;
        font-size: 13px;
    }

    .log-details {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px dashed #f0f0f0;
    }

    .log-amount {
        font-size: 14px;
        color: #333;
    }

    .log-amount .change {
        font-weight: 600;
        margin: 0 5px;
    }

    .log-amount .increase {
        color: #52c41a;
    }

    .log-amount .decrease {
        color: #f5222d;
    }

    .log-balance {
        font-size: 14px;
        color: #666;
    }

    .log-memo {
        margin-top: 8px;
        padding-left: 32px; /* 与类型图标对齐 */
        color: #666;
        font-size: 13px;
        line-height: 1.5;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #8c8c8c;
    }

    .empty-state i {
        font-size: 48px;
        margin-bottom: 15px;
        color: #e5e5e5;
    }

    .pager {
        margin-top: 30px;
    }

    .pagination {
        justify-content: center;
    }
</style>

<div class="container">
    <div class="section ptb-30">
        <div class="row">
            <div class="col-md-3">
                {include file="common/sidenav" /}
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h2 class="page-header pos-r">
                            余额变动记录
                        </h2>

                        <div class="widget-body balance-log-container">
                            {if count($userMoneyLogList) > 0}
                            {volist name="userMoneyLogList" id="item"}
                            <div class="media balance-log-item">
                                <!-- 移除删除叉号按钮 -->

                                <!-- 记录头部 -->
                                <div class="log-header">
                                    <!-- 变动类型 -->
                                    <div class="log-type {if $item.money > 0}increase{else}decrease{/if}">
                                        <i>{if $item.money > 0}+{else}-{/if}</i>
                                        {if $item.money > 0}余额增加{else}余额减少{/if}
                                    </div>
                                    <!-- 变动时间 -->
                                    <div class="log-time">
                                        {$item.createtime|date='Y-m-d H:i',###}
                                    </div>
                                </div>

                                <!-- 变动备注 -->
                                <div class="log-memo">
                                    {$item.memo|htmlentities|default='无备注信息'}
                                </div>

                                <!-- 金额详情 -->
                                <div class="log-details">
                                    <div class="log-amount">
                                        变动：<span class="change {if $item.money > 0}increase{else}decrease{/if}">
                                                {if $item.money > 0}+{/if}￥{$item.money|abs|number_format=2}
                                            </span>
                                    </div>
                                    <div class="log-balance">
                                        变动后：￥{$item.after|number_format=2}
                                    </div>
                                </div>
                            </div>
                            {/volist}
                            {else}
                            <!-- 空状态 -->
                            <div class="empty-state">
                                <i class="fa fa-wallet"></i>
                                <p>暂无余额变动记录</p>
                            </div>
                            {/if}
                        </div>

                        <!-- 分页 -->
                        <div class="pager text-center">
                            {if count($userMoneyLogList) > 0}
                            {$userMoneyLogList->render()}
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 移除删除相关JS逻辑（原删除按钮已删除）
</script>